<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idNumber">
        <el-input v-model="queryParams.idNumber" placeholder="请输入身份证号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="证件类型" prop="documentType">
        <el-select v-model="queryParams.documentType" placeholder="请选择证件类型" clearable @change="handleQuery">
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="护照" value="护照"></el-option>
          <el-option label="驾驶证" value="驾驶证"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="信用评级" prop="creditRating">
        <el-input v-model="queryParams.creditRating" placeholder="请输入信用评级" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="客户状态" prop="customerStatus">
        <el-input v-model="queryParams.customerStatus" placeholder="请输入客户状态" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="客户类型" prop="customerType">
        <el-select v-model="queryParams.customerType" placeholder="请选择客户类型">
          <el-option label="个人" value="个人"></el-option>
          <el-option label="农户" value="农户"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户ID" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="客户等级" prop="customerClass">
        <el-input v-model="queryParams.customerClass" placeholder="请输入客户等级" clearable @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button type="primary" @click="addCustomer">新增</el-button>
    </el-row>

    <el-table :data="customerList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="客户名称" align="center" prop="name" />
      <el-table-column label="证件类型" align="center" prop="documentType" />
      <el-table-column label="身份证号" align="center" prop="idNumber" />
      <el-table-column label="客户状态" align="center" prop="customerStatus" />
      <el-table-column label="电话号码" align="center" prop="tel" />
      <el-table-column label="信用评级" align="center" prop="creditRating" />
      <el-table-column label="信用额度" align="center" prop="creditLimit" />
      <el-table-column label="乡镇" align="center" prop="township" />
      <el-table-column label="村" align="center" prop="village" />
      <el-table-column label="组" align="center" prop="group" />
      <el-table-column label="用户ID" align="center" prop="userId" />
      <el-table-column label="信用金额" align="center" prop="creditAmount" />
      <el-table-column label="客户类型" align="center" prop="customerType" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <div class="button-container">
            <el-button type="info" size="small" @click="updateCustomer(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="4" :offset="0">
        <el-pagination background :page-sizes="[1, 3, 5, 10, 15, 20]" :page-size="pageSize" :current-page="pageNum"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @next-click="nextPage" @prev-click="prevPage"
          @current-change="skipPage" @size-change="changeSize"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 5,
      pageNum: 1,
      total: 0,
      customerList: [],
      form: {},
      queryParams: {
        name: "",
        id: "",
        idNumber: "",
        documentType: "",
        customerStatus: "",
        customerType: "",
        creditRating: "",
      },
    };
  },
  methods: {

    addCustomer() {
      this.$router.push("/addCustomer");
    },
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },

    getList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        params: {
          idNumber: this.queryParams.idNumber,
          documentType: this.queryParams.documentType,
          customerStatus: this.queryParams.customerStatus,
          customerType: this.queryParams.customerType,
          name: this.queryParams.name,
          creditRating: this.queryParams.creditRating,
        },
      };
      // 调用后端接口查询客户列表
      this.axios
        .post("api/customer-server/queryCustomer", param)
        .then((res) => {
          let pageData = res.data.data;


          //给分页赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
          //表格赋值
          this.customerList = pageData.list;

        })
        .catch((error) => {
          console.error("Error fetching customer list:", error);
        });
    },
    //删除判断条件
    remove(id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //发送参数请求
        this.deleteCustomer(id);
      });
    },
    //删除
    deleteCustomer(id) {
      this.axios.post("api/customer-server/deleteCustomer/" + id).then(res => {
        if (res.data.code == 200) {
          this.getList();
        }
      });
    },
    //带一个id去编辑页面
    updateCustomer(id) {
      this.$router.push({
        path: "/updateCustomer",
        query: {
          id: id
        }
      });
    },


    resetQuery() {
      // 重置查询参数和表单
      this.queryParams = {
        name: "",
        id: "",
        idNumber: "",
        documentType: "",
        customerStatus: "",
        customerType: "",
        creditRating: "",
      };
      this.$refs.queryRef.resetFields();
      // 重置页码为第一页并重新获取数据
      this.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(selection) {
      // 处理表格选中项变化事件
    },
    nextPage(val) {
      this.pageNum = val;
      this.getList();
    },
    prevPage(val) {
      this.pageNum = val;
      this.getList();
    },
    skipPage(val) {
      this.pageNum = val;
      this.getList();
    },
    changeSize(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
  },
  created() {
    // 组件创建时获取客户列表数据
    this.getList();
  },
};
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* 调整按钮之间的间距 */
}
</style>
